<template>
  <div class="goods-list-container">

    <el-form
        ref="form"
        :model="queryForm"
        :inline="true"
        @submit.native.prevent
    >
      <el-form-item>
        <el-input v-model="searchKey" placeholder="景点名称"/>
      </el-form-item>
      <el-form-item>
        <el-button
            icon="el-icon-search"
            type="primary"
            native-type="submit"
            @click="handleQuery"
        >
          查询
        </el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="20">
      <el-col
          v-for="(item, index) in list"
          :key="index"
          :xs="24"
          :sm="8"
          :md="8"
          :lg="8"
          :xl="6"
      >
        <el-card :body-style="{ padding: '10px' }" shadow="hover">
          <div class="goods-list-card-body">
            <!--            <div class="goods-list-tag-group">-->
            <!--              <el-tag v-if="item.isRecommend" hit type="success">推荐</el-tag>-->
            <!--              <el-tag v-if="item.status === 0" hit type="danger">缺货</el-tag>-->
            <!--            </div>-->
            <div class="goods-list-image-group">
              <img :src="item.image" @click="detailsShow(item)" class="goods-list-image"/>
            </div>
            <div class="goods-list-title">{{ item.name }}</div>
            <div class="goods-list-description">{{ item.sightDesc }}</div>
            <div class="goods-list-price">
              <i class="el-icon-shopping-cart-full"></i>
              <span style="color: red;font-weight: bold" @click="buyTicketFun(item.id)">点击购票</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-pagination
        STYLE="margin-top: 10px"
        background
        :current-page="queryForm.pageNo"
        :layout="layout"
        :page-size="queryForm.pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
    ></el-pagination>

    <el-dialog title="请选择票类型" :visible.sync="buyTicket" :append-to-body="true" :modal-append-to-body="false">
      <el-form :model="form">
        <el-form-item label="" width="50%" :label-width="formLabelWidth">
          <!--          <el-radio v-model="form.ticketId" v-for="(item) in ticketList" :label="item.id">{{item.name}}</el-radio>-->
          <el-select v-model="form.ticketId" placeholder="请选择">
            <el-option
                v-for="(item,index) in ticketList"
                :key="item.id"
                :label="getNameAndPrice(index)"
                :value="item.id">
            </el-option>
          </el-select>
          <!--          <span style="color: red;font-weight: bolder;margin-left: 20px">{{ticketPrice}}</span>-->
        </el-form-item>
        <el-form-item label="" width="50%" :label-width="formLabelWidth">
          <el-input v-model="form.phone" placeholder="请输入联系人电话"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="buyTicket = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

<!--    //景区详情展示-->
    <el-dialog
        title="提示"
        :visible.sync="detailsVisible"
        width="60%"
        :before-close="handleClose">

      <el-row>
        <el-col :span="12">
          <img :src="this.image" width="400px"/>
          <br>
          <div style="color: #409EFF;font-size: 2em">景点名字:{{this.name}}</div>
          <br>
          <div style="color: #409EFF;font-size: 2em">景点描述:{{this.sightDesc}}</div>
        </el-col>
        <el-col :span="12">
          <el-button type="primary" plain @click="addContent()">新增评论</el-button>
          <el-tree
              :data="menus"
              :props="defaultProps"
              node-key="id"
              ref="menuTree"
              :filter-node-method="filterNode"
              :default-expanded-keys="expandKeys"
              :highlight-current = "true"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
              type="text"
              size="mini"
              @click="() => answer(data)">
            回复
          </el-button>
        </span>
      </span>
          </el-tree>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
    <el-button @click="detailsVisible = false">取 消</el-button>
    <el-button type="primary" @click="detailsVisible = false">确 定</el-button>
  </span>
    </el-dialog>

<!--    评论-->
    <el-dialog title="评论" :visible.sync="addVisible">
      <el-form :model="contentform">
        <el-form-item label="内容" :label-width="formLabelWidth">
          <el-input v-model="contentform.content" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click=add()>确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

export default {
  name: 'sightsView',
  components: {},
  data() {
    return {
        filterText: "",
        menus: [],
        expandKeys: [],
        defaultProps: {
          children: "commentsList",
          label: "content"
        },

      ticketPrice: 0,
      form: {
        ticketId: '',
        phone: '',
        userId: 0,
      },
      formLabelWidth: '120px',
      detailsVisible: false,
      buyTicket: false,
      pageNo: 1,
      pageSize: 20,
      searchKey: '',
      queryForm: {
        pageNo: 1,
        pageSize: 20,
        title: '',
      },
      ticketList: [],
      list: null,
      listLoading: true,
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      elementLoadingText: '正在加载...',
      image:'',
      name:'',
      sightDesc:'',
      addVisible:false,
      contentform: {
        content: '',
        parentId:'',
        answerId:'',
        sightId:'',
        publishUserid:''
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    answer(data){
      this.contentform= {
        content: '',
        parentId:'',
        answerId:'',
        sightId:'',
        publishUserid:''
      }
      console.log(data)
      this.addVisible=true
      if (data.parentId==0){
        this.contentform.parentId=data.id
      }else {
        this.contentform.parentId=data.parentId
      }
      this.contentform.answerId=data.id
      this.contentform.sightId=data.sightId;
      this.contentform.publishUserid=JSON.parse(window.sessionStorage.getItem("user")).id
    },
    addContent(){
      this.contentform= {
        content: '',
            parentId:'',
            answerId:'',
            sightId:'',
            publishUserid:''
      }
        this.addVisible=true
        this.contentform.sightId=this.sightId;
        this.contentform.publishUserid=JSON.parse(window.sessionStorage.getItem("user")).id
        this.contentform.parentId=0
        this.contentform.answerId=0
    },
    add(){
      this.$http.post("/comments/add", this.contentform).then(res => {
        console.log(res)
      })
      this.expandKeys = [this.contentform.answerId];
      this.addVisible=false
      setTimeout(() => {
        this.getMenus(this.contentform.sightId);
      }, 1000);
      // this.$nextTick(()=>{
      //   this.getMenus(this.contentform.sightId);
      // })
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },

    getMenus(id) {
      this.$http.get("/comments/list/tree?id="+id).then(({ data }) => {
        this.menus = data.data;
      });
    },

    detailsShow(item) {
      console.log(item)
      this.image=item.image,
      this.sightId=item.id,
      this.name=item.name,
      this.sightDesc=item.sightDesc,
      this.getMenus(item.id);
      this.detailsVisible = true;
    },

    getNameAndPrice(index) {
      return this.ticketList[index].name + this.ticketList[index].price
    },

    buyTicketFun(sid) {
      // console.info(sid);
      this.form = {}
      this.buyTicket = true;
      this.$http.get("/ticket/getBySid/" + sid).then(res => {
        // console.log(res.data.data)
        this.ticketList = res.data.data
      });
    },

    //添加类型表单
    submitForm() {
      this.addShow = false
      let uid = JSON.parse(window.sessionStorage.getItem("user")).id
      this.form.userId = uid;
      // console.log(this.form)
      this.$http.post("/ticket/buy", this.form).then(res => {
        // console.log(res.data)
        if (res.data.status) {
          this.$message({
            message: res.data.data,
            type: 'success'
          });
          this.buyTicket = false;
          this.fetchData()
          this.form = {}
        } else {
          this.$message.error(res.data.msg);
          this.fetchData();
          this.buyTicket = false;
          this.form = {}
        }
      })
      this.form = {}

    },


    handleSizeChange(val) {
      this.queryForm.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNo = val
      this.fetchData()
    },
    handleQuery() {
      this.queryForm.pageNo = 1
      this.fetchData()
    },
    async fetchData() {
      this.listLoading = true
      this.$http.get("/sights/view/list/" + this.pageNo + "/" + this.pageSize + "?searchKey=" + this.searchKey).then(res => {
        // console.log(res.data.data)
        this.list = res.data.data.records
        this.total = res.data.data.total
      });
      // this.total = totalCount
    },
  },
}
</script>
<style lang="less" scoped>
.goods-list-container {
  .goods-list-card-body {
    position: relative;
    text-align: center;
    cursor: pointer;

    .goods-list-tag-group {
      position: absolute;
      top: 10px;
      right: 5px;
      z-index: 9;
    }

    .goods-list-image-group {
      height: 400px;
      overflow: hidden;

      .goods-list-image {
        width: 100%;
        height: 400px;
        transition: all ease-in-out 0.3s;

        &:hover {
          transform: scale(1.1);
        }
      }
    }

    .goods-list-title {
      margin: 8px 0;
      font-size: 16px;
      font-weight: bold;
    }

    .goods-list-description {
      font-size: 14px;
      color: #808695;
    }

    .goods-list-price {
      margin: 8px 0;
      font-size: 14px;
      //color: @base-color-orange;
      s {
        color: #c5c8ce;
      }
    }
  }
}
</style>

